<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>极客终端 | 个人博客</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animations.css">
    <link rel="stylesheet" href="css/pet-robot.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/firacode@6.2.0/distr/fira_code.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>

<body>
    <!-- 数字雨背景 -->
    <canvas id="matrix-rain"></canvas>

    <!-- 网格背景 -->
    <div class="grid-overlay"></div>

    <!-- 主容器 -->
    <div class="container">
        <!-- 顶部终端栏 -->
        <div class="terminal-header">
            <div class="terminal-buttons">
                <span class="terminal-btn close"></span>
                <span class="terminal-btn minimize"></span>
                <span class="terminal-btn maximize"></span>
            </div>
            <div class="terminal-title">root@geek-terminal:~# <span class="blink">_</span></div>
            <div class="terminal-info">
                <span id="date-time"></span>
                <span class="connection"><i class="fas fa-wifi"></i> 已连接</span>
            </div>
        </div>

        <!-- 导航菜单 -->
        <nav class="main-nav">
            <ul>
                <li class="active" data-page="home"><i class="fas fa-terminal"></i> 主页</li>
                <li data-page="projects"><i class="fas fa-code-branch"></i> 项目</li>
                <li data-page="resume"><i class="fas fa-file-code"></i> 简历</li>
                <li data-page="learning"><i class="fas fa-brain"></i> 学习</li>
            </ul>
        </nav>

        <!-- 内容区域 -->
        <main class="content">
            <!-- 主页内容 -->
            <section id="home" class="page active">
                <div class="terminal-welcome">
                    <pre class="ascii-art">
██   ██ ███████ ██      ██       ██████      ██     ██  ██████  ██████  ██      ██████  
██   ██ ██      ██      ██      ██    ██     ██     ██ ██    ██ ██   ██ ██      ██   ██ 
███████ █████   ██      ██      ██    ██     ██  █  ██ ██    ██ ██████  ██      ██   ██ 
██   ██ ███████ ███████ ███████  ██████       ███ ███   ██████  ██   ██ ███████ ██████  

> 系统初始化中... <
> 访问者IP: 已记录 <
> 权限级别: 访客 <
> 状态: 在线 <
</pre>
                    <div class="typing-text">
                        <p>> 姓名: <span class="highlight">极客开发者</span></p>
                        <p>> 职业: <span class="highlight">全栈工程师 / 游戏开发者</span></p>
                        <p>> 技能: <span class="highlight">Web开发, 游戏设计, 人工智能</span></p>
                        <p>> 状态: <span class="highlight blink-slow">寻找新的挑战中...</span></p>
                        <p class="command-prompt">> <span class="typed-cursor blink">_</span></p>
                    </div>
                </div>

                <div class="quick-stats">
                    <div class="stat-box">
                        <div class="stat-title">项目</div>
                        <div class="stat-value">42</div>
                        <div class="stat-progress">
                            <div class="progress-bar" style="width: 80%"></div>
                        </div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-title">技能点</div>
                        <div class="stat-value">1337</div>
                        <div class="stat-progress">
                            <div class="progress-bar" style="width: 65%"></div>
                        </div>
                    </div>
                    <div class="stat-box">
                        <div class="stat-title">经验值</div>
                        <div class="stat-value">9001+</div>
                        <div class="stat-progress">
                            <div class="progress-bar" style="width: 90%"></div>
                        </div>
                    </div>
                </div>

                <div class="recent-activity">
                    <h2><i class="fas fa-history"></i> 最近活动</h2>
                    <div class="activity-log">
                        <div class="log-entry">
                            <span class="log-time">2023-11-28 21:45</span>
                            <span class="log-type commit">COMMIT</span>
                            <span class="log-message">优化了主页响应式布局</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">2023-11-27 18:30</span>
                            <span class="log-type deploy">DEPLOY</span>
                            <span class="log-message">部署了新版本的个人作品集</span>
                        </div>
                        <div class="log-entry">
                            <span class="log-time">2023-11-25 14:15</span>
                            <span class="log-type learn">LEARN</span>
                            <span class="log-message">学习了WebGL高级渲染技术</span>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 项目内容 -->
            <section id="projects" class="page">
                <div class="section-header">
                    <h2><i class="fas fa-code-branch"></i> 项目展示</h2>
                    <div class="filter-tags">
                        <span class="tag active" data-filter="all">全部</span>
                        <span class="tag" data-filter="game">游戏</span>
                        <span class="tag" data-filter="web">Web</span>
                        <span class="tag" data-filter="ai">AI</span>
                    </div>
                </div>

                <div class="projects-grid">
                    <!-- 项目卡片 -->
                    <div class="project-card" data-category="game">
                        <div class="card-inner">
                            <div class="card-front">
                                <div class="project-icon"><i class="fas fa-gamepad"></i></div>
                                <h3>像素塔防</h3>
                                <div class="project-tags">
                                    <span class="mini-tag">游戏</span>
                                    <span class="mini-tag">塔防</span>
                                </div>
                            </div>
                            <div class="card-back">
                                <h3>像素塔防</h3>
                                <p>复古风格的塔防游戏，具有独特的升级系统和多样化的敌人AI。</p>
                                <div class="tech-stack">
                                    <span class="tech">Unity</span>
                                    <span class="tech">C#</span>
                                    <span class="tech">Pixel Art</span>
                                </div>
                                <a href="#" class="project-link">查看项目 <i class="fas fa-external-link-alt"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="project-card" data-category="web">
                        <div class="card-inner">
                            <div class="card-front">
                                <div class="project-icon"><i class="fas fa-globe"></i></div>
                                <h3>数据可视化平台</h3>
                                <div class="project-tags">
                                    <span class="mini-tag">Web</span>
                                    <span class="mini-tag">数据</span>
                                </div>
                            </div>
                            <div class="card-back">
                                <h3>数据可视化平台</h3>
                                <p>实时数据分析和可视化平台，支持多种图表类型和数据源集成。</p>
                                <div class="tech-stack">
                                    <span class="tech">React</span>
                                    <span class="tech">D3.js</span>
                                    <span class="tech">Node.js</span>
                                </div>
                                <a href="#" class="project-link">查看项目 <i class="fas fa-external-link-alt"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="project-card" data-category="ai">
                        <div class="card-inner">
                            <div class="card-front">
                                <div class="project-icon"><i class="fas fa-robot"></i></div>
                                <h3>智能聊天机器人</h3>
                                <div class="project-tags">
                                    <span class="mini-tag">AI</span>
                                    <span class="mini-tag">NLP</span>
                                </div>
                            </div>
                            <div class="card-back">
                                <h3>智能聊天机器人</h3>
                                <p>基于深度学习的对话系统，能够理解上下文并提供个性化回复。</p>
                                <div class="tech-stack">
                                    <span class="tech">Python</span>
                                    <span class="tech">TensorFlow</span>
                                    <span class="tech">Flask</span>
                                </div>
                                <a href="#" class="project-link">查看项目 <i class="fas fa-external-link-alt"></i></a>
                            </div>
                        </div>
                    </div>

                    <div class="project-card" data-category="game">
                        <div class="card-inner">
                            <div class="card-front">
                                <div class="project-icon"><i class="fas fa-vr-cardboard"></i></div>
                                <h3>VR探索游戏</h3>
                                <div class="project-tags">
                                    <span class="mini-tag">游戏</span>
                                    <span class="mini-tag">VR</span>
                                </div>
                            </div>
                            <div class="card-back">
                                <h3>VR探索游戏</h3>
                                <p>身临其境的虚拟现实探索游戏，玩家可以探索神秘的科幻世界。</p>
                                <div class="tech-stack">
                                    <span class="tech">Unreal Engine</span>
                                    <span class="tech">C++</span>
                                    <span class="tech">Oculus SDK</span>
                                </div>
                                <a href="#" class="project-link">查看项目 <i class="fas fa-external-link-alt"></i></a>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 简历内容 -->
            <section id="resume" class="page">
                <div class="section-header">
                    <h2><i class="fas fa-file-code"></i> 职业履历</h2>
                </div>

                <div class="timeline-container">
                    <div class="timeline-node">
                        <div class="timeline-date">2022 - 现在</div>
                        <div class="timeline-content">
                            <h3>高级全栈开发工程师</h3>
                            <h4>科技创新公司</h4>
                            <div class="timeline-details">
                                <p>负责设计和开发企业级Web应用，优化前端性能和用户体验。</p>
                                <p>带领5人开发团队，实施敏捷开发流程，提高团队效率30%。</p>
                                <div class="tech-used">
                                    <span class="tech">React</span>
                                    <span class="tech">Node.js</span>
                                    <span class="tech">MongoDB</span>
                                    <span class="tech">Docker</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-node">
                        <div class="timeline-date">2019 - 2022</div>
                        <div class="timeline-content">
                            <h3>游戏开发工程师</h3>
                            <h4>创意游戏工作室</h4>
                            <div class="timeline-details">
                                <p>开发了3款独立游戏，累计下载量超过100万。</p>
                                <p>设计并实现了创新的游戏机制和AI系统。</p>
                                <div class="tech-used">
                                    <span class="tech">Unity</span>
                                    <span class="tech">C#</span>
                                    <span class="tech">Blender</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="timeline-node">
                        <div class="timeline-date">2015 - 2019</div>
                        <div class="timeline-content">
                            <h3>计算机科学学士</h3>
                            <h4>顶尖科技大学</h4>
                            <div class="timeline-details">
                                <p>主修人工智能和游戏开发，GPA 3.8/4.0。</p>
                                <p>获得优秀毕业生奖和两项编程竞赛一等奖。</p>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="skills-container">
                    <div class="skills-radar">
                        <h3><i class="fas fa-code"></i> 技能雷达图</h3>
                        <div class="radar-chart-container">
                            <canvas id="skills-radar"></canvas>
                        </div>
                        <div class="skills-legend">
                            <div class="skill-item">
                                <span class="skill-dot" style="background-color: var(--accent-color);"></span>
                                <span class="skill-name">技能水平</span>
                            </div>
                        </div>
                    </div>

                    <div class="skill-bars">
                        <h3><i class="fas fa-code-branch"></i> 技能掌握度</h3>
                        <div class="skill-level-legend">
                            <div class="legend-item">
                                <div class="legend-stars">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                </div>
                                <span class="legend-text">精通</span>
                            </div>
                            <div class="legend-item">
                                <div class="legend-stars">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                                <span class="legend-text">熟悉</span>
                            </div>
                            <div class="legend-item">
                                <div class="legend-stars">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="far fa-star"></i>
                                    <i class="far fa-star"></i>
                                </div>
                                <span class="legend-text">了解</span>
                            </div>
                        </div>
                        <div class="skill-bars-container">
                            <div class="skill-bar-item">
                                <div class="skill-bar-header">
                                    <span class="skill-name">HTML/CSS</span>
                                    <span class="skill-percentage">90%</span>
                                </div>
                                <div class="skill-bar-bg">
                                    <div class="skill-bar-fill" style="width: 90%"></div>
                                </div>
                                <div class="skill-level">
                                    <div class="skill-stars">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-bar-item">
                                <div class="skill-bar-header">
                                    <span class="skill-name">JavaScript</span>
                                    <span class="skill-percentage">85%</span>
                                </div>
                                <div class="skill-bar-bg">
                                    <div class="skill-bar-fill" style="width: 85%"></div>
                                </div>
                                <div class="skill-level">
                                    <div class="skill-stars">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-bar-item">
                                <div class="skill-bar-header">
                                    <span class="skill-name">React</span>
                                    <span class="skill-percentage">80%</span>
                                </div>
                                <div class="skill-bar-bg">
                                    <div class="skill-bar-fill" style="width: 80%"></div>
                                </div>
                                <div class="skill-level">
                                    <div class="skill-stars">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-bar-item">
                                <div class="skill-bar-header">
                                    <span class="skill-name">Node.js</span>
                                    <span class="skill-percentage">75%</span>
                                </div>
                                <div class="skill-bar-bg">
                                    <div class="skill-bar-fill" style="width: 75%"></div>
                                </div>
                                <div class="skill-level">
                                    <div class="skill-stars">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="far fa-star"></i>
                                    </div>
                                </div>
                            </div>
                            <div class="skill-bar-item">
                                <div class="skill-bar-header">
                                    <span class="skill-name">Unity</span>
                                    <span class="skill-percentage">85%</span>
                                </div>
                                <div class="skill-bar-bg">
                                    <div class="skill-bar-fill" style="width: 85%"></div>
                                </div>
                                <div class="skill-level">
                                    <div class="skill-stars">
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                        <i class="fas fa-star"></i>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- 学习内容 -->
            <section id="learning" class="page">
                <div class="section-header">
                    <h2><i class="fas fa-brain"></i> 学习记录</h2>
                </div>

                <div class="learning-container">
                    <div class="notes-section">
                        <h3>笔记库</h3>
                        <div class="notes-list">
                            <div class="note-item">
                                <div class="note-header">
                                    <h4>WebGL高级渲染技术</h4>
                                    <span class="note-date">2023-11-25</span>
                                </div>
                                <div class="note-preview markdown-content">
                                    <h5>着色器基础</h5>
                                    <p>WebGL中的着色器是在GPU上运行的小程序，分为顶点着色器和片元着色器。</p>
                                    <div class="note-actions">
                                        <button class="btn btn-small view-note" data-note-id="webgl">查看全文</button>
                                    </div>
                                </div>
                                <div class="note-full-content markdown-content" id="note-webgl" style="display: none;">
                                    <h5>着色器基础</h5>
                                    <p>WebGL中的着色器是在GPU上运行的小程序，分为顶点着色器和片元着色器。顶点着色器处理顶点位置，而片元着色器处理像素颜色。</p>
                                    <pre><code class="language-glsl">// 顶点着色器示例
void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}</code></pre>
                                    <h5>高级光照模型</h5>
                                    <p>PBR（基于物理的渲染）提供了更真实的光照效果，考虑了材质的物理属性。PBR模型包括：</p>
                                    <ul>
                                        <li>基础色（Albedo/Base Color）</li>
                                        <li>金属度（Metallic）</li>
                                        <li>粗糙度（Roughness）</li>
                                        <li>法线贴图（Normal Map）</li>
                                        <li>环境光遮蔽（Ambient Occlusion）</li>
                                    </ul>
                                    <p>这些属性共同决定了材质在不同光照条件下的表现。</p>
                                    <h5>后处理效果</h5>
                                    <p>WebGL可以通过帧缓冲区（Framebuffer）实现各种后处理效果，如：</p>
                                    <ul>
                                        <li>泛光（Bloom）</li>
                                        <li>景深（Depth of Field）</li>
                                        <li>运动模糊（Motion Blur）</li>
                                        <li>屏幕空间反射（Screen Space Reflection）</li>
                                    </ul>
                                    <div class="note-actions">
                                        <button class="btn btn-small close-note" data-note-id="webgl">关闭</button>
                                    </div>
                                </div>
                            </div>

                            <div class="note-item">
                                <div class="note-header">
                                    <h4>React性能优化策略</h4>
                                    <span class="note-date">2023-10-15</span>
                                </div>
                                <div class="note-preview markdown-content">
                                    <h5>虚拟DOM优化</h5>
                                    <p>使用React.memo和useMemo可以避免不必要的重渲染。</p>
                                    <div class="note-actions">
                                        <button class="btn btn-small view-note" data-note-id="react">查看全文</button>
                                    </div>
                                </div>
                                <div class="note-full-content markdown-content" id="note-react" style="display: none;">
                                    <h5>虚拟DOM优化</h5>
                                    <p>使用React.memo和useMemo可以避免不必要的重渲染，特别是在处理大型列表或复杂组件时。</p>
                                    <pre><code class="language-javascript">// 使用React.memo优化组件
const OptimizedComponent = React.memo(({ data }) => {
    return <div>{data.map(item => <Item key={item.id} {...item} />)}</div>;
});</code></pre>
                                    <h5>状态管理优化</h5>
                                    <p>合理使用状态管理可以显著提升应用性能：</p>
                                    <ul>
                                        <li>使用useReducer处理复杂状态逻辑</li>
                                        <li>使用Context API避免过深的属性传递</li>
                                        <li>考虑使用状态分片（state slicing）减少重渲染范围</li>
                                    </ul>
                                    <pre><code class="language-javascript">// 使用useReducer管理复杂状态
const [state, dispatch] = useReducer(reducer, initialState);

// 分发动作
dispatch({ type: 'INCREMENT', payload: 5 });</code></pre>
                                    <h5>代码分割与懒加载</h5>
                                    <p>使用React.lazy和Suspense实现组件懒加载，减少初始加载时间：</p>
                                    <pre><code class="language-javascript">// 懒加载组件
const LazyComponent = React.lazy(() => import('./LazyComponent'));

// 在应用中使用
function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}</code></pre>
                                    <div class="note-actions">
                                        <button class="btn btn-small close-note" data-note-id="react">关闭</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

        </main>

        <!-- 终端底部 -->
        <div class="terminal-footer">
            <div class="status">
                <span class="status-item"><i class="fas fa-server"></i> 系统状态: 正常</span>
                <span class="status-item"><i class="fas fa-memory"></i> 内存使用: 42%</span>
                <span class="status-item"><i class="fas fa-microchip"></i> CPU负载: 13%</span>
            </div>
            <div class="copyright">
                &copy; 2023 极客终端 | <span class="version">v1.3.3.7</span>
            </div>
        </div>
    </div>

    <!-- 宠物机器人 -->
    <div id="pet-robot">
        <div class="robot-container">
            <div class="robot-body">
                <div class="robot-antenna"></div>
                <div class="robot-head">
                    <div class="robot-eyes">
                        <div class="robot-eye"></div>
                        <div class="robot-eye"></div>
                    </div>
                </div>
                <div class="robot-display"></div>
                <div class="robot-controls">
                    <div class="robot-button"></div>
                    <div class="robot-button"></div>
                    <div class="robot-button"></div>
                </div>
            </div>
            <div class="robot-speech-bubble">
                <p>你好！我是你的极客机器人助手~ 试试连续点击我或输入特殊序列？</p>
            </div>
            <div class="robot-menu">
                <div class="menu-item" data-action="greet">
                    <i class="fas fa-comment"></i> 打招呼
                </div>
                <div class="menu-item" data-action="play">
                    <i class="fas fa-gamepad"></i> 玩耍
                </div>
                <div class="menu-item" data-action="sleep">
                    <i class="fas fa-moon"></i> 睡觉
                </div>
                <div class="menu-item" data-action="think">
                    <i class="fas fa-brain"></i> 思考
                </div>
            </div>
        </div>
    </div>

    <!-- 全息波纹效果容器 -->
    <div id="hologram-ripple"></div>

    <!-- 粒子光标效果容器 -->
    <div id="cursor-particles"></div>

    <!-- 故障效果层 -->
    <div class="glitch-overlay"></div>

    <!-- 已移除扫描线效果，改为CSS中的CRT效果 -->

    <!-- 脚本 -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    <script>
        // 备用Chart.js加载
        if (!window.Chart) {
            console.log('主CDN加载失败，尝试备用CDN');
            const script = document.createElement('script');
            script.src = 'https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js';
            script.onload = function () {
                console.log('备用Chart.js加载成功');
                // 重新初始化雷达图
                if (typeof initSkillsRadar === 'function') {
                    initSkillsRadar();
                }
            };
            document.head.appendChild(script);
        }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.0/highlight.min.js"></script>
    <script src="js/config-manager.js"></script>
    <script src="js/matrix.js"></script>
    <script src="js/particles.js"></script>
    <script src="js/effects.js"></script>
    <script src="js/main.js"></script>
    <script src="js/pet-robot.js"></script>
</body>

</html>